window.onload = function () {
    // 用户名验证
    // 1. 获取用户名输入框
    let uName = document.querySelector('.uname');
    let uNameInfo = document.querySelector('.uname-info');
    // 2. 绑定失去光标事件
    uName.onblur = function() {
        // 3. 获取输入框的值
        let uNameVal = this.value;
        // 4. 判断用户输入的内容
        if(uNameVal) {
            // 引入正则表达式
            // 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：
            let regUname = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            // 使用test方法判断
            if(!regUname.test(uNameVal)) {
                uNameInfo.innerHTML = '*用户名格式输入不正确';
            } else {
                uNameInfo.innerHTML = '';
            }
        } else {
            // 如果输入为空
            uNameInfo.innerHTML = '*用户名不能为空';
        }
    }

    // 密码验证
    // 1. 获取密码输入框
    let pwd = document.querySelector('.pwd');
    let pwdInfo = document.querySelector('.pwd-info');
    // 2. 绑定失去光标事件
    pwd.onblur = function() {
        // 3. 获取输入框的值
        let pwdVal = this.value;
        // 4. 判断用户输入的内容
        if(pwdVal) {
            // 引入正则表达式
            // 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：：
            let regPwd = /^[a-zA-Z]\w{5,17}$/;
            // 使用test方法判断
            if(!regPwd.test(pwdVal)) {
                pwdInfo.innerHTML = '*密码格式输入不正确';
            } else {
                pwdInfo.innerHTML = '';
            }
        } else {
            // 如果输入为空
            pwdInfo.innerHTML = '*密码不能为空';
        }
    }

    // 确认密码验证
    // 1. 获取确认密码输入框
    let surePwd = document.querySelector('.sure-pwd');
    let surepwdInfo = document.querySelector('.surepwd-info');
    // 2. 绑定失去光标事件
    surePwd.onblur = function() {
        // 3. 获取输入框的值
        let pwdVal = pwd.value;
        let surePwdVal = this.value;
        // 4. 判断用户输入的内容
        if(surePwdVal) {
            if(surePwdVal != pwdVal) {
                surepwdInfo.innerHTML = '*两次密码输入不一致'
            } else {
                surepwdInfo.innerHTML = '';
            }
        } else {
            // 如果输入为空
            surepwdInfo.innerHTML = '*确认密码不能为空';
        }
    }

     // 手机号码验证
    // 1. 获取手机号码输入框
    let phone = document.querySelector('.phone');
    let phoneInfo = document.querySelector('.phone-info');
    // 2. 绑定失去光标事件
    phone.onblur = function() {
        // 3. 获取输入框的值
        let phoneVal = this.value;
        // 4. 判断用户输入的内容
        if(phoneVal) {
            // 引入正则表达式
            let regPhone = /^(13[0-9]|14[5|7]|15[0-9]|17[0|7|9]|18[0|1|2|3|5|6|7|8|9]|19[1|9])\d{8}$/;
            // 使用test方法判断
            if(!regPhone.test(phoneVal)) {
                phoneInfo.innerHTML = '*手机号码格式输入不正确';
            } else {
                phoneInfo.innerHTML = '';
            }
        } else {
            // 如果输入为空
            phoneInfo.innerHTML = '*手机号码不能为空';
        }
    }

    // 点击注册按钮 验证表单
    let btn = document.querySelector('.btn');
    let regForm = document.querySelector('#regForm');
    btn.onclick = function() {
        // 自动执行事件： 只要给相同的dom元素绑定了相同的事件类型 就可以使用自动执行事件
        // focus blur submit是比较特殊的三个事件。因为所有的输入框都有获取光标和失去光标事件，所有的表单都有提交事件
        // 所以以上三个事件即使没有显式的绑定事件处理函数也可以触发
        uName.focus()
        uName.blur()
        pwd.focus()
        pwd.blur()
        surePwd.focus()
        surePwd.blur()
        phone.focus()
        phone.blur()
        if(uNameInfo.innerHTML == '' && pwdInfo.innerHTML == '' && surepwdInfo.innerHTML == '' && phoneInfo.innerHTML == '') {
            regForm.submit();
        }
    }
}